<template>
  <div class="detail">
    <div class="swiper">
      <div class="back">
        <li class="left" @click="goback">
          <van-icon name="arrow-left" />
        </li>
        <li class="right">
          <span>
            <van-icon name="ellipsis" />
          </span>
          <span>
            <a-icon type="close-circle" />
          </span>
        </li>
      </div>
      <div class="back-1">
        <li>&emsp;&nbsp;&nbsp;&nbsp;编号:{{info.id}}</li>
        <li>共八张</li>
      </div>
      <img :src="info.img1" alt />
    </div>
    <div class="back-one">
      <div class="back-one-1">
        <p>
          <span>{{info.word}}</span>
          <span>VR</span>
        </p>
      </div>
      <div class="back-one-2">
        <p>
          <span>{{info.price}}万</span>
          <span>3室2厅1卫</span>
          <span>101m²</span>
        </p>
      </div>
      <div class="back-one-3">
        <h2>房源信息</h2>
        <div>
          <p>
            <span>单价</span>
            <span>{{info.price}}/m²</span>
          </p>
          <p>
            <span>朝向</span>
            <span>南</span>
          </p>
          <p>
            <span>装修</span>
            <span>精装修</span>
          </p>
        </div>
      </div>
      <div class="back-one-4">
        <div>
          <p>
            <span>楼层</span>
            <span>高层/共18层</span>
          </p>
          <p>
            <span>类型</span>
            <span>高层住宅</span>
          </p>
          <p>
            <span>更新</span>
            <span>19分钟</span>
          </p>
        </div>
      </div>
      <div class="back-one-5">
        <h3>房源特色</h3>
        <div>
          <p>
            <span>|</span>&nbsp;核心卖点
          </p>
          <p>{{info.title}}</p>
        </div>
        <div>
          <p>
            <span>|</span>&nbsp;业主心态
          </p>
          <p>业主诚心出售此房，积极配合看房和达成协议后的各项手续。产权清晰无纠纷，看房方便，房主诚意出售</p>
        </div>
        <div>
          <p>
            <span>|</span>&nbsp;服务介绍
          </p>
          <p>{{info.title}}</p>
          <p>1:能够精准的根据每一位客户的详细需求匹配发到性价比合适的</p>
          <p>2:和业主议价是我的强项,让每一位客户真正的省钱</p>
          <p>3:我们的服务能让您物超所值</p>
          <p>4:您的买房安家之旅，让您更加安心 放心 省心</p>
        </div>
      </div>
      <div class="back-one-6">
        <div class="back-one-6-1">
          <h3>宿迁碧桂园</h3>
          <span>小区详情</span>
        </div>
        <div class="back-one-7-1">
          <img src="https://img0.baidu.com/it/u=1684700096,3110243465&fm=26&fmt=auto&gp=0.jpg" alt />
          <div>
            <p>参考均价&nbsp;&nbsp;{{info.price}}/m²</p>
            <p>比&nbsp;上&nbsp;月&emsp;持平</p>
            <p>小区地址 {{info.city}}</p>
          </div>
        </div>
      </div>
      <div class="back-ont-7">
        <h4>参考月贷</h4>
        <div>
          <img src="../imges/17.png" alt />
        </div>
      </div>
      <div class="back-one-8">
        <h4>位置及周边</h4>
        <div>
          <baidu-map class="map" center="北京">
            <bm-geolocation
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
              :showAddressBar="true"
              :autoLocation="true"
            ></bm-geolocation>
          </baidu-map>
        </div>
      </div>
    </div>
    <div class="good">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" :text="info.name" color="#ee0a24" />
        <van-goods-action-icon icon="star" text="收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="在线咨询" />
        <van-goods-action-button type="danger" text="电话咨询" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      info: {},
      current: 0
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/detail",
        method: "post",
        data: { id: this.id }
      }).then(res => {
        this.info = res.data.data;
      });
    },
    onChange(index) {
      this.current = index;
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.back-one-8 {
  margin-top: 10px;
}
.back-one-8 h4 {
  margin-left: 30px;
  font-size: 22px;
  font-weight: 700;
}
.back-ont-7 {
  width: 100%;
  margin-top: -40px;
}
.back-ont-7 img {
  width: 95%;
  margin-left: 10px;
  height: 200px;
}
.back-ont-7 h4 {
  margin-left: 30px;
  font-size: 22px;
  font-weight: 700;
}
.back-one-7-1 {
  height: 196px;
  display: flex;
  margin: 10px 30px;
}
.back-one-7-1 div {
  margin-left: 10px;
  line-height: 25px;
}
.back-one-7-1 img {
  width: 100px;
  height: 50%;
  border-radius: 5px;
}
.back-one-6 {
  margin-top: 100px;
  width: 100%;
  height: 245px;
}
.back-one-6-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  height: 50px;
  width: 100%;
}
.back-one-5 div {
  margin-left: 10px;
  font-size: 16px;
}
.back-one-5 div p:nth-child(1) {
  font-weight: bold;
  color: #000;
}
.back-one-5 div p span:nth-child(1) {
  color: #fa636d;
  font-size: 20px;
  font-weight: 700;
}
h3 {
  font-size: 22px;
  font-weight: bold;
  margin-left: 10px;
  margin-top: 5px;
}
h2 {
  margin-left: 10px;
  font-weight: bold;
}
.back-one-3 div {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 30px;
}
.back-one-3 div p:nth-child(1) {
  margin-left: -20px;
}
.back-one-3 div p:nth-child(2) {
  margin-left: -20px;
}
.back-one-3 div p:nth-child(3) {
  margin-left: -10px;
}
.back-one-3 div p span {
  display: block;
  color: #c9c7c7;
}
.back-one-3 div p span:nth-child(2) {
  color: #000;
  font-size: 16px;
}

.back-one-4 {
  margin-top: 10px;
}
.back-one-4 div {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 30px;
}
.back-one-4 div p:nth-child(1) {
  margin-left: -20px;
}
.back-one-4 div p:nth-child(2) {
  margin-left: -10px;
}
.back-one-4 div p:nth-child(3) {
  margin-left: -10px;
}
.back-one-4 div p span {
  display: block;
  color: #c9c7c7;
}
.back-one-4 div p span:nth-child(2) {
  color: #000;
  font-size: 16px;
}
.back {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  display: flex;
}
.back-1 {
  position: absolute;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  top: 230px;
  left: 0;
}
.back-one-1 p:nth-child(1) {
  margin-top: 10px;
  margin-left: 10px;
}

.back-one-2 {
  display: flex;
}
.back-one-2 p span {
  font-size: 18px;
  border: none;
  color: #fa636d;
  margin-left: 10px;
  font-weight: bold;
}
.back-one-1 p span:nth-child(2) {
  display: inline-block;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #000;
  font-size: 14px;
}
.back-1 li:nth-child(1) {
  width: 100px;
  height: 40px;
  display: flex;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  color: #eef3f5;
  background: rgba(0, 0, 0, 0.4);
}
.back-one-1 {
  font-size: 18px;
}
.back-1 li:nth-child(2) {
  width: 80px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  color: #eef3f5;
  background: rgba(0, 0, 0, 0.4);
}
.left {
  width: 45px;
  height: 45px;
  line-height: 47px;
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  color: #eef3f5;
  background: rgba(0, 0, 0, 0.4);
}
.right {
  width: 100px;
  height: 40px;
  display: flex;
  line-height: 40px;
  border-radius: 20px;
  font-size: 22px;
  background: rgba(231, 231, 231, 0.6);
}
.right span {
  width: 50px;
  display: inline-block;
  text-align: center;
}
.right span:nth-child(1) {
  margin-top: 5px;
  margin-left: 5px;
}
.detail-swiper {
  position: relative;
  top: 0;
  left: 0;
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 275px;
  color: #fff;
  font-size: 20px;
  line-height: 275px;
  text-align: center;
}
.detail {
  width: 100%;
}
img {
  width: 100%;
  height: 275px;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.map {
  width: 95%;
  height: 200px;
  margin-left: 10px;
}
</style>